<template>
    <el-dialog title="历史登记记录查看" :visible.sync="dialogForm" width="1100px">
        <base-list ref="carRecordHistory" :condition="condition" :datas.sync="carRecordHistory" :pageSearch="pageSearch">
            <el-form :inline="true" :model="condition" class="search-form" slot="search" label-width="100px">
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="车牌号">
                            <el-input v-model="condition['search_LIKE_plateNumber']"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="登记时间起">
                            <el-date-picker v-model="condition['search_GTE_createDateTime']" :picker-options="startPickerOptions" type="date" placeholder="起始日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="登记时间止">
                            <el-date-picker v-model="condition['search_LTE_createDateTime']" @change="handleChangeEnd" :picker-options="endPickerOptions" type="date" placeholder="结束日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="登记类型">
                            <el-select v-model="condition['search_EQ_registerType']" placeholder="请选择类型" clearable>
                                <el-option v-for="[key, val] in _dictRegisterType" :key="key" :label="val" :value="key">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-button class="ml-100" type="primary" @click="loadData">查询</el-button>
                    </el-col>
                </el-row>
            </el-form>
            <el-table slot="list" :data="carRecordHistory" border stripe max-height="500">
                <el-table-column type="index" label="序号" fixed="left" width="50" align="center"></el-table-column>
                <el-table-column prop="plateNumber" label="车牌号"  min-width="120"> </el-table-column>
                <el-table-column prop="registerType" label="登记类型"  min-width="120">
                    <template slot-scope='scope'>
                        {{ scope.row.registerType | _filterRegisterType }}
                    </template>
                </el-table-column>
                <el-table-column prop="containerNoOne" label="箱号1"  min-width="120"></el-table-column>
                <el-table-column prop="purposeFieldOne" label="目的场位"  min-width="120"></el-table-column>
                <el-table-column prop="containerNoTwo" label="箱号2"  min-width="120"></el-table-column>
                <el-table-column prop="purposeFieldTwo" label="目的场位"  min-width="120"></el-table-column>
                <el-table-column prop="createDateTime" label="进港时间"  min-width="150"></el-table-column>
                <el-table-column prop="passTime" label="出港时间"  min-width="150"></el-table-column>
                <el-table-column prop="residenceTime" label="停留时间" align="center"  min-width="110"></el-table-column>
            </el-table>
        </base-list>
    </el-dialog>
</template>

<script>
import { getOnPortCarHistory } from "@/api/middleControl/middleControl";
export default {
    data() {
        return {
            dialogForm: false,
            carRecordHistory: [],
            condition: {},
            pageSearch: getOnPortCarHistory
        };
    },
    methods: {
        loadData() {
            this.$refs.carRecordHistory.loadData();
        },
        handleChangeEnd(val) {
            let setVal = val;
            if (val) {
                setVal = val.split(" ")[0] + " 23:59:59";
            }
            this.condition["search_LTE_createDateTime"] = setVal;
        }
    },
    computed: {
        startPickerOptions() {
            let endDate = this.condition["search_LTE_createDateTime"];
            return {
                disabledDate(time) {
                    if (endDate) {
                        return time.getTime() > new Date(endDate).getTime();
                    } else {
                        return false;
                    }
                }
            };
        },
        endPickerOptions() {
            let startDate = this.condition["search_GTE_createDateTime"];
            return {
                disabledDate(time) {
                    if (startDate) {
                        return time.getTime() < new Date(startDate).getTime();
                    } else {
                        return false;
                    }
                }
            };
        }
    }
};
</script>

<style>
</style>
